function l(msg) {
    console.log(msg);
}
//new canvas element
var mCanvas = document.createElement('canvas');
var context = mCanvas.getContext('2d');
// mCanvas.setAttribute('style', 'background-color:#ff5001');
var canvasWidth = 400;
var canvasHeight = 300;
//append to body
mCanvas.width = canvasWidth;
mCanvas.height = canvasHeight;
document.body.appendChild(mCanvas);
var arc_x = 20;//center x position
var arc_y = 20;//center y position
// drawParticle(arc_x, arc_y);
//draw particle
function drawParticle(x, y) {
    //set fillcolor
    context.fillStyle = "rgba(255, 0, 255,1)";
//draw a circle of the required size
    context.beginPath();

    var arc_r = 10;
    context.arc(x, y, arc_r, 0, Math.PI * 2, true);
//and fill it
    context.fill();

}
context.font = "20px Arial";
var grd = context.createRadialGradient(100, 100, 10, 50, 50, 100);
// context.rect(20, 30, 40, 50);
// context.stroke();
// context.moveTo(0, 0);
// context.lineTo(100, 100);
// context.stroke();
// context.fillText("Hello World", 100, 100);
// context.strokeText("Hello World", 100, 100);
//gradient
// var grd = context.createLinearGradient(0,0, 200, 0);
grd.addColorStop(1, "blue");
grd.addColorStop(0, "red");

context.strokeStyle = grd;
context.shadowColor = "#ff5001";
context.shadowBlur = 1;
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;

context.strokeText("Smile", 100, 100);
//#e1ecfe